<template>
  <!-- 文创传媒柱图 -->
  <div class="mngMediaChartPage">
    <div class="chartBox" id="mngMediaChart"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from "vue";
import echarts from "@/common/utils/echarts.js";
import { changeNumToWan } from "../../utils/handelScreen";
import { getManageBoardMedia } from "@/api/dashboard/manageBoard";

const mediaChartRef = ref(null);
const options = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
    formatter: "{b0}<br>{a0}: {c0}",
  },
  grid: {
    top: "20%",
    bottom: "10%",
    right: "10%",
    left: "5%",
  },
  xAxis: {
    data: ['合同总收入','非户外实收','非户外应收','户外实收','户外应收'],
    axisLine: {
      lineStyle: {
        color: "#0a3e98",
      },
    },
    axisTick: {
      show: false,
      lineStyle: {
        color: "#BAE7FF",
      },
    },
    splitLine: {
      lineStyle: {
        color: "#195384",
        type: "dotted",
      },
    },
    axisLabel: {
      show: true,
      margin: 8, // 距x轴距离
      fontSize: 10,
      color: "rgba(216,240,255,0.8)",
    },
  },
  yAxis: [
    {
      type: "value",
      name: "(万元)",
      gridIndex: 0,
      minInterval: 1,
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(176,215,255,0.25)",
          type: [5, 10],
          dashOffset: 10,
        },
      },
      axisLabel: {
        show: false,
        margin: 2,
        fontSize: 12,
        color: "rgba(216,240,255,0.8)",
      },
    },
  ],
  series: [
    {
      name: "",
      type: "bar",
      barWidth: 22,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          {
            offset: 0,
            color: "#1EE7E7",
          },
          {
            offset: 1,
            color: "#1890FF",
          },
        ]),
      },
      data: [10,20,30,40,50],
      z: 10,
      zlevel: 0,
      label: {
        fontSize: 12,
        show: true,
        position: "top",
        distance: 5,
        color: "#D8F0FF",
      },
    },
    {
      // 柱图的分隔
      type: "pictorialBar",
      itemStyle: {
        color: "#081736",
      },
      symbolRepeat: "fixed",
      symbolMargin: 4,
      symbol: "rect",
      symbolClip: true,
      symbolSize: [22, 5],
      symbolPosition: "start",
      symbolOffset: [1, 1],
      data: [],
      width: 2,
      z: 0,
      zlevel: 1,
    },
    {
      name: "外框",
      type: "bar",
      barGap: "-110%", // 设置外框粗细
      barWidth: 22,
      itemStyle: {
        color: "transparent", // 填充色
      },
      z: 0,
    },
  ],
});

// 在父组件中调用
const initMediaChart = (option) => {
  if (!mediaChartRef.value) {
    mediaChartRef.value = echarts.init(
      document.getElementById("mngMediaChart")
    );
  }
    let newDataArr = option.value.series1.map((n, i) => {
      return n ? changeNumToWan(n) : 0;
    });
    options.series[0].data = newDataArr;
    options.series[1].data = newDataArr;
    mediaChartRef.value.setOption(options);
    return mediaChartRef.value
};
defineExpose({
  initMediaChart,
});
</script>

<style lang="scss" scoped>
.mngMediaChartPage {
  width: 100%;
  height: 100%;
  .chartBox {
    width: 100%;
    height: 100%;
  }
}
</style>
